<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./swiper-4.5.0/dist/css/swiper.min.css">
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/0.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<header>
    <div class="nav cl">
        <div class="logo">
            <p>杨·个人博客</p>
        </div>
        <div class="navbar">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">关于我</a></li>
                <li class="kuhai">
                    <a href="">学海无涯</a>
                    <div class="list">
                        <p><a href="">Javascript</a></p>
                        <p><a href="">HTML5</a></p>
                        <p><a href="">Css3</a></p>
                    </div>
                </li>
                <li><a href="">电影人生</a></li>
                <li><a href="">留言板</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="container geren cl">
        <div class="main-top">
            <h1>个人作品展示</h1>
        </div>
        <div class="kong">

        </div>
        <div class="row cl">
            <div class="list-zuo">
                <h2>腾讯新闻</h2>
                <p>
                    腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚...
                </p>
                <a href="http://yang1275833191.gitee.io/tengxunxinwen">浏览作品</a>
            </div>
            <div class="list-zuo">
                <h2>堆糖</h2>
                <p>
                    分享收集有关时尚生活的各种图片资讯,手工DIY、插画手绘、美食菜谱、潮流品牌、搭配街拍、美妆发型等等。
                </p>
                <a href="http://yang1275833191.gitee.io/duitangwang">浏览作品</a>
            </div>
            <div class="list-zuo">
                <h2>天涯明月刀</h2>
                <p>
                    天刀2018年度资料片《东海移花》7月1日正式上线!东海移花携新服踏浪而来,全新门派终于揭开神秘面纱;移花主岛话本东海会四盟震撼现世,直面四大盟主最强武学;年中...
                </p>
                <a href=" http://yang1275833191.gitee.io/tianya_mingyue_knife">浏览作品</a>
            </div>
            <div class="list-zuo">
                <h2>长虹</h2>
                <p>
                    四川长虹集团官方产品网站,提供智慧家庭智能家电全套解决方案,长虹彩电、空调、热水器、厨卫、手机、日电小家电、新能源、美菱冰箱、美菱洗衣机等最新最全产品信息查询...
                </p>
                <a href="http://yang1275833191.gitee.io/taobao_page">浏览作品</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="text-left">
            <h2>博文推荐</h2>
        </div>
        <div class="kong-2">

        </div>
        <div class="list-row">
            <div class="list-a">
                <div class="one-1">
                    <img src="./images/u=3312543479,2840924628&fm=58&bpow=590&bpoh=563.jpg" alt="">
                    <h4>HTML5</h4>
                    <p class="sheng">超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
                    <p>
                        <a href="">阅读全文</a>
                    </p>
                </div>
            </div>
            <div class="list-a">
                <div class="one-1">
                    <img src="./images/u=33869634,3333232226&fm=58&bpow=220&bpoh=220.jpg" alt="">
                    <h4>CSS3</h4>
                    <p class="sheng">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行...</p>
                    <p>
                        <a href="">阅读全文</a>
                    </p>
                </div>
            </div>
            <div class="list-a">
                <div class="one-1">
                    <img src="./images/b58f8c5494eef01f70276779e1fe9925bc317d5e.png" alt="">
                    <h4>Javascript</h4>
                    <p class="sheng">JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早...</p>
                    <p>
                        <a href="">阅读全文</a>
                    </p>
                </div>
            </div>
            <div class="list-a">
                <div class="one-1">
                    <img src="./images/u=1681391545,4187928589&fm=85&s=0D803C72F2A477157583DA4D0300C0EE.jpg" alt="">
                    <h4>Vue</h4>
                    <p class="sheng">每个Vue 实例在被创建时都要经过一系列的初始化过程。如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行...</p>
                    <p>
                        <a href="">阅读全文</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="biao">
            <div class="row">
                <div class="biao-1">
                    <img src="./images/client_1.png" alt="">
                </div>
                <div class="biao-1">
                    <img src="./images/client_2.png" alt="">
                </div>
                <div class="biao-1">
                    <img src="./images/client_3.png" alt="">
                </div>
                <div class="biao-1">
                    <img src="./images/client_4.png" alt="">
                </div>
            </div>
        </div>
        <div class="tu">

        </div>
    </div>
</main>
<footer>
    <div class="container">
        <div class="footer-box">
            <div class="box-1">
                <div class="text-1">
                    <h2>杨 · 个人博客</h2>
                    <p>Hi~欢迎访问我的博客！</p>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <div class="box-2-a">
                        <h4>Languages</h4>
                        <ul>
                            <li><span>HTML5</span></li>
                            <li><span>CSS3</span></li>
                            <li><span>Javascript</span></li>
                        </ul>
                    </div>


                </div>
                <div>
                    <div class="box-2-a">
                        <h4>Dreams</h4>
                        <ul>
                            <li><span>优秀的前端工程师</span></li>
                            <li><span>换取一堆堆的发票</span></li>

                        </ul>
                    </div>
                </div>
                <div>
                    <div class="box-2-a">
                        <h4>Interests</h4>
                        <ul>
                            <li><span>跑步, 奔跑吧! 骚年~</span></li>
                            <li><span>音乐, 诗歌, 美, 浪漫才是活着的意义</span></li>
                            <li><span>曾经是个王者, 后来被生活打压! 惨~</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footerbo">
            <p>
                <small>
                    <span>杨鹏的个人博客</span>
                    <a href="">京ICP备17011914号</a>
                    <span>1275833191@qq.com</span>
                </small>
            </p>
        </div>
    </div>
</footer>







<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>